<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>项目基础建设 CSS公共样式 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.2005d9cf.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/8.58ff24c5.js" as="script"><link rel="prefetch" href="/assets/js/10.0a7a4ca4.js"><link rel="prefetch" href="/assets/js/100.3309ce28.js"><link rel="prefetch" href="/assets/js/101.ac045b1a.js"><link rel="prefetch" href="/assets/js/102.e80bc311.js"><link rel="prefetch" href="/assets/js/103.bf660db8.js"><link rel="prefetch" href="/assets/js/104.b26aecd4.js"><link rel="prefetch" href="/assets/js/105.0e9ab80d.js"><link rel="prefetch" href="/assets/js/106.b590426c.js"><link rel="prefetch" href="/assets/js/107.5bf74c11.js"><link rel="prefetch" href="/assets/js/108.ffdc48f3.js"><link rel="prefetch" href="/assets/js/109.8da9360f.js"><link rel="prefetch" href="/assets/js/11.d9ff276d.js"><link rel="prefetch" href="/assets/js/110.3986bd59.js"><link rel="prefetch" href="/assets/js/111.1522ded7.js"><link rel="prefetch" href="/assets/js/12.1fe7afa3.js"><link rel="prefetch" href="/assets/js/13.5e3a6c9a.js"><link rel="prefetch" href="/assets/js/14.541bbe3d.js"><link rel="prefetch" href="/assets/js/15.f7a50163.js"><link rel="prefetch" href="/assets/js/16.2f792024.js"><link rel="prefetch" href="/assets/js/17.a1b6c76e.js"><link rel="prefetch" href="/assets/js/18.44579087.js"><link rel="prefetch" href="/assets/js/19.4ea5fdf4.js"><link rel="prefetch" href="/assets/js/20.e975ae71.js"><link rel="prefetch" href="/assets/js/21.8f6a653b.js"><link rel="prefetch" href="/assets/js/22.f7fe055a.js"><link rel="prefetch" href="/assets/js/23.e404dad6.js"><link rel="prefetch" href="/assets/js/24.fe3bc22e.js"><link rel="prefetch" href="/assets/js/25.85d2cc13.js"><link rel="prefetch" href="/assets/js/26.9f14e07f.js"><link rel="prefetch" href="/assets/js/27.d49bdf6c.js"><link rel="prefetch" href="/assets/js/28.72ba52cd.js"><link rel="prefetch" href="/assets/js/29.2e392833.js"><link rel="prefetch" href="/assets/js/3.7675493a.js"><link rel="prefetch" href="/assets/js/30.b69d63e5.js"><link rel="prefetch" href="/assets/js/31.c99d1817.js"><link rel="prefetch" href="/assets/js/32.6d83d1c4.js"><link rel="prefetch" href="/assets/js/33.bebcb9b5.js"><link rel="prefetch" href="/assets/js/34.8f621c93.js"><link rel="prefetch" href="/assets/js/35.6606e0ad.js"><link rel="prefetch" href="/assets/js/36.75614371.js"><link rel="prefetch" href="/assets/js/37.4ce9e497.js"><link rel="prefetch" href="/assets/js/38.95263d32.js"><link rel="prefetch" href="/assets/js/39.a86d2616.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.e7f88f7e.js"><link rel="prefetch" href="/assets/js/41.644d2886.js"><link rel="prefetch" href="/assets/js/42.a9398322.js"><link rel="prefetch" href="/assets/js/43.50ffced2.js"><link rel="prefetch" href="/assets/js/44.8a76f778.js"><link rel="prefetch" href="/assets/js/45.d825d0e7.js"><link rel="prefetch" href="/assets/js/46.e692b0d4.js"><link rel="prefetch" href="/assets/js/47.4a5600e2.js"><link rel="prefetch" href="/assets/js/48.b58a480d.js"><link rel="prefetch" href="/assets/js/49.c31716d2.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.5c5f704f.js"><link rel="prefetch" href="/assets/js/51.3b090e9a.js"><link rel="prefetch" href="/assets/js/52.a2846fa7.js"><link rel="prefetch" href="/assets/js/53.08563d97.js"><link rel="prefetch" href="/assets/js/54.abaa1adf.js"><link rel="prefetch" href="/assets/js/55.79ddef5b.js"><link rel="prefetch" href="/assets/js/56.8fc21a8e.js"><link rel="prefetch" href="/assets/js/57.a7a7e91e.js"><link rel="prefetch" href="/assets/js/58.395fd83e.js"><link rel="prefetch" href="/assets/js/59.b2899c75.js"><link rel="prefetch" href="/assets/js/6.ed7c7deb.js"><link rel="prefetch" href="/assets/js/60.12cf70af.js"><link rel="prefetch" href="/assets/js/61.bbb7862b.js"><link rel="prefetch" href="/assets/js/62.ec59ffa8.js"><link rel="prefetch" href="/assets/js/63.f4d6c257.js"><link rel="prefetch" href="/assets/js/64.9e382220.js"><link rel="prefetch" href="/assets/js/65.94ab71cc.js"><link rel="prefetch" href="/assets/js/66.33c7d856.js"><link rel="prefetch" href="/assets/js/67.6d9b7cc8.js"><link rel="prefetch" href="/assets/js/68.63f4486e.js"><link rel="prefetch" href="/assets/js/69.fd717229.js"><link rel="prefetch" href="/assets/js/7.05321aa0.js"><link rel="prefetch" href="/assets/js/70.b37bad49.js"><link rel="prefetch" href="/assets/js/71.bf0f14a3.js"><link rel="prefetch" href="/assets/js/72.37e36450.js"><link rel="prefetch" href="/assets/js/73.d6b8cf7a.js"><link rel="prefetch" href="/assets/js/74.66cae9eb.js"><link rel="prefetch" href="/assets/js/75.f56a19ed.js"><link rel="prefetch" href="/assets/js/76.e9d0a86e.js"><link rel="prefetch" href="/assets/js/77.6f880a29.js"><link rel="prefetch" href="/assets/js/78.bd4f38f3.js"><link rel="prefetch" href="/assets/js/79.f22e09a9.js"><link rel="prefetch" href="/assets/js/80.c7a75ffd.js"><link rel="prefetch" href="/assets/js/81.60c66414.js"><link rel="prefetch" href="/assets/js/82.1cac8d03.js"><link rel="prefetch" href="/assets/js/83.dca1d99b.js"><link rel="prefetch" href="/assets/js/84.8c41ec82.js"><link rel="prefetch" href="/assets/js/85.af3896bc.js"><link rel="prefetch" href="/assets/js/86.b30b6900.js"><link rel="prefetch" href="/assets/js/87.b51ef412.js"><link rel="prefetch" href="/assets/js/88.d3803962.js"><link rel="prefetch" href="/assets/js/89.7d9cb78b.js"><link rel="prefetch" href="/assets/js/9.40722af3.js"><link rel="prefetch" href="/assets/js/90.31875659.js"><link rel="prefetch" href="/assets/js/91.6be253a0.js"><link rel="prefetch" href="/assets/js/92.db3fd2c0.js"><link rel="prefetch" href="/assets/js/93.0eae35a1.js"><link rel="prefetch" href="/assets/js/94.3068fcfa.js"><link rel="prefetch" href="/assets/js/95.0aa43f4e.js"><link rel="prefetch" href="/assets/js/96.5dd378f0.js"><link rel="prefetch" href="/assets/js/97.f475d7a5.js"><link rel="prefetch" href="/assets/js/98.c7b425d3.js"><link rel="prefetch" href="/assets/js/99.91630bf2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>HTML&amp;CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/1110/" class="sidebar-link">Scss语言学习实用心得</a></li><li><a href="/pages/15af70/" class="sidebar-link">H5 标签使用场景</a></li><li><a href="/pages/03a46d/" class="sidebar-link">css常用命名单词</a></li><li><a href="/pages/e1f868/" class="sidebar-link">项目基础建设 css与处理器scss</a></li><li><a href="/pages/b189f2/" aria-current="page" class="active sidebar-link">项目基础建设 CSS公共样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/b189f2/#样式初始化" class="sidebar-link">样式初始化</a></li><li class="sidebar-sub-header"><a href="/pages/b189f2/#公共样式" class="sidebar-link">公共样式</a></li></ul></li><li><a href="/pages/10481f/" class="sidebar-link">iframe</a></li><li><a href="/pages/749ce2/" class="sidebar-link">css 变量使用</a></li><li><a href="/pages/3aded5/" class="sidebar-link">float 布局</a></li><li><a href="/pages/2a8bd5/" class="sidebar-link">在 Javascript 和 Sass（或 CSS！）之间共享变量的方法</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#HTML&amp;CSS" data-v-0c557b5e>HTML&amp;CSS</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2021-12-16</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">项目基础建设 CSS公共样式<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h2 id="样式初始化"><a href="#样式初始化" class="header-anchor">#</a> 样式初始化</h2> <p>不再使用<code>Reset CSS</code> 了， 对于有富文本 markdown解析有差异</p> <p>使用<code>normalize.css</code></p> <ul><li><p>与许多CSS重置不同，保留有用的默认值。</p></li> <li><p>规范各种元素的样式。</p></li> <li><p>更正错误和常见的浏览器不一致问题。</p></li> <li><p>通过细微的修改来提高可用性。</p></li> <li><p>使用详细注释说明代码的作用。</p></li></ul> <p>直接下载：https://necolas.github.io/normalize.css/latest/normalize.css</p> <p>npm: <code>npm install --save normalize.css</code></p> <h2 id="公共样式"><a href="#公共样式" class="header-anchor">#</a> 公共样式</h2> <p>模拟了<code>bootstrap</code>的一些class，例如：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">// Flex 布局
.d-flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.d-inline-flex</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-flex <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-row</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-column</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-row-reverse</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> row-reverse <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-column-reverse</span> <span class="token punctuation">{</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column-reverse <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-wrap</span> <span class="token punctuation">{</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-nowrap</span> <span class="token punctuation">{</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-wrap-reverse</span> <span class="token punctuation">{</span>
  <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap-reverse <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-fill</span> <span class="token punctuation">{</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1 1 auto <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-grow-0</span> <span class="token punctuation">{</span>
  <span class="token property">flex-grow</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-grow-1</span> <span class="token punctuation">{</span>
  <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1 <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-shrink-0</span> <span class="token punctuation">{</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 0 <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.flex-shrink-1</span> <span class="token punctuation">{</span>
  <span class="token property">flex-shrink</span><span class="token punctuation">:</span> 1 <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.justify-content-start</span> <span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.justify-content-end</span> <span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-end <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.justify-content-center</span> <span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.justify-content-between</span> <span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.justify-content-around</span> <span class="token punctuation">{</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-around <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-items-start</span> <span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-items-end</span> <span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> flex-end <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-items-center</span> <span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-items-baseline</span> <span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> baseline <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-items-stretch</span> <span class="token punctuation">{</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> stretch <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-start</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> flex-start <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-end</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> flex-end <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-center</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-between</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> space-between <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-around</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> space-around <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-content-stretch</span> <span class="token punctuation">{</span>
  <span class="token property">align-content</span><span class="token punctuation">:</span> stretch <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-auto</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> auto <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-start</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> flex-start <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-end</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> flex-end <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-center</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> center <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-baseline</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> baseline <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.align-self-stretch</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> stretch <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br></div></div><p>除此之外，我也使用<code>Scss</code>的控制指令和<code>ScssScript</code>批量生成了一些样式, 例如：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>// 定义内外边距，历遍1-40 取其偶数和5的倍数
<span class="token atrule"><span class="token rule">@for</span> $i from 0 through 40</span> <span class="token punctuation">{</span>
  <span class="token atrule"><span class="token rule">@if</span> $i % 2==0 <span class="token keyword">or</span> $i % 5==0</span> <span class="token punctuation">{</span>
    <span class="token selector">.m-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.p-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token atrule"><span class="token rule">@each</span> $short<span class="token punctuation">,</span> $long in l left<span class="token punctuation">,</span> t top<span class="token punctuation">,</span> r right<span class="token punctuation">,</span> b bottom<span class="token punctuation">,</span> x <span class="token punctuation">(</span>left<span class="token punctuation">,</span> right<span class="token punctuation">)</span><span class="token punctuation">,</span>
      y <span class="token punctuation">(</span>top<span class="token punctuation">,</span> bottom<span class="token punctuation">)</span></span>
    <span class="token punctuation">{</span>
      <span class="token atrule"><span class="token rule">@if</span> $short==x <span class="token keyword">or</span> $short==y</span> <span class="token punctuation">{</span>
        <span class="token selector">.m#</span><span class="token punctuation">{</span>$short<span class="token punctuation">}</span><span class="token selector">-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
          <span class="token atrule"><span class="token rule">@each</span> $direction in $long</span> <span class="token punctuation">{</span>
            <span class="token selector">margin-#</span><span class="token punctuation">{</span>$direction<span class="token punctuation">}</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.p#</span><span class="token punctuation">{</span>$short<span class="token punctuation">}</span><span class="token selector">-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
          <span class="token atrule"><span class="token rule">@each</span> $direction in $long</span> <span class="token punctuation">{</span>
            <span class="token selector">padding-#</span><span class="token punctuation">{</span>$direction<span class="token punctuation">}</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@else</span></span> <span class="token punctuation">{</span>
        <span class="token selector">.m#</span><span class="token punctuation">{</span>$short<span class="token punctuation">}</span><span class="token selector">-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
          <span class="token selector">margin-#</span><span class="token punctuation">{</span>$long<span class="token punctuation">}</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">.p#</span><span class="token punctuation">{</span>$short<span class="token punctuation">}</span><span class="token selector">-#</span><span class="token punctuation">{</span>$i<span class="token punctuation">}</span> <span class="token punctuation">{</span>
          <span class="token selector">padding-#</span><span class="token punctuation">{</span>$long<span class="token punctuation">}</span><span class="token punctuation">:</span> $i + px <span class="token important">!important</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><p>还有<code>mixin</code>, 例如：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@mixin</span> clearfix</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;:after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@mixin</span> scrollBar</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;::-webkit-scrollbar-track-piece</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #d3dce6<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;::-webkit-scrollbar</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;::-webkit-scrollbar-thumb</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #99a9bf<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>差不多就到这里了，最后附上最终代码</p> <ul><li><code>index.scss</code></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./variables.scss'</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./mixin.scss'</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./transition.scss'</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">'./global.scss'</span><span class="token punctuation">;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><code>variables.scss</code></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code>// base color
$<span class="token property">blue</span><span class="token punctuation">:</span>#324157<span class="token punctuation">;</span>
$<span class="token property">light-blue</span><span class="token punctuation">:</span>#3A71A8<span class="token punctuation">;</span>
$<span class="token property">red</span><span class="token punctuation">:</span>#C03639<span class="token punctuation">;</span>
$<span class="token property">pink</span><span class="token punctuation">:</span> #E65D6E<span class="token punctuation">;</span>
$<span class="token property">green</span><span class="token punctuation">:</span> #30B08F<span class="token punctuation">;</span>
$<span class="token property">tiffany</span><span class="token punctuation">:</span> #4AB7BD<span class="token punctuation">;</span>
$<span class="token property">yellow</span><span class="token punctuation">:</span>#FEC171<span class="token punctuation">;</span>
$<span class="token property">panGreen</span><span class="token punctuation">:</span> #30B08F<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><code>transition.scss</code></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/* fade */</span>
<span class="token selector">.fade-enter-active,
.fade-leave-active</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.28s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.fade-enter,
.fade-leave-active</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* fade-transform */</span>
<span class="token selector">.fade-transform-leave-active,
.fade-transform-enter-active</span> <span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> all .5s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.fade-transform-enter</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-30px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.fade-transform-leave-to</span> <span class="token punctuation">{</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>30px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><ul><li><code>mixin.scss</code></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@mixin</span> clearfix</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;:after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
    <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@mixin</span> scrollBar</span> <span class="token punctuation">{</span>
  <span class="token selector">&amp;::-webkit-scrollbar-track-piece</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #d3dce6<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;::-webkit-scrollbar</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp;::-webkit-scrollbar-thumb</span> <span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #99a9bf<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@mixin</span> relative</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">pct</span><span class="token punctuation">(</span>$pct<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">width: #</span><span class="token punctuation">{</span>$pct<span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@mixin</span> <span class="token function">triangle</span><span class="token punctuation">(</span>$width<span class="token punctuation">,</span> $height<span class="token punctuation">,</span> $color<span class="token punctuation">,</span> $direction<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  $<span class="token property">width</span><span class="token punctuation">:</span> $width/2<span class="token punctuation">;</span>
  $<span class="token property">color-border-style</span><span class="token punctuation">:</span> $height solid $color<span class="token punctuation">;</span>
  $<span class="token property">transparent-border-style</span><span class="token punctuation">:</span> $width solid transparent<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  <span class="token atrule"><span class="token rule">@if</span> $direction==up</span> <span class="token punctuation">{</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> $color-border-style<span class="token punctuation">;</span>
    <span class="token property">border-left</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token atrule"><span class="token rule">@else</span> if $direction==right</span> <span class="token punctuation">{</span>
    <span class="token property">border-left</span><span class="token punctuation">:</span> $color-border-style<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token atrule"><span class="token rule">@else</span> if $direction==down</span> <span class="token punctuation">{</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> $color-border-style<span class="token punctuation">;</span>
    <span class="token property">border-left</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token atrule"><span class="token rule">@else</span> if $direction==left</span> <span class="token punctuation">{</span>
    <span class="token property">border-right</span><span class="token punctuation">:</span> $color-border-style<span class="token punctuation">;</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> $transparent-border-style<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br></div></div><ul><li><p><code>common.scss</code></p></li> <li><p><code>global.scss</code></p></li></ul></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/12/16, 18:56:14</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/e1f868/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">项目基础建设 css与处理器scss</div></a> <a href="/pages/10481f/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">iframe</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/e1f868/" class="prev">项目基础建设 css与处理器scss</a></span> <span class="next"><a href="/pages/10481f/">iframe</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/749ce2/"><div>
            css 变量使用
            <!----></div></a> <span class="date">01-26</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/9ee936/"><div>
            js 精准和模糊获取dom
            <!----></div></a> <span class="date">01-26</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2a8bd5/"><div>
            在 Javascript 和 Sass（或 CSS！）之间共享变量的方法
            <!----></div></a> <span class="date">01-25</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.2005d9cf.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/8.58ff24c5.js" defer></script>
  </body>
</html>
